<template>
  <div>
    <template>
      <!--页头组件-->
      <el-page-header style="background-color: #0095d7;color: white;line-height: 60px"
                      @back="goBack" content="物资信息更改页面"></el-page-header>
      <!--分割线-->
      <el-divider></el-divider>
      <!--name代表上传文件时 文件的参数名
          limit="1" 设置只能选择一张图片
      -->
      <el-card>
        <el-form :model="item" :rules="rules" ref="ruleForm">

          <el-form-item prop="name" label="物资名称" label-width="80px">
            <el-input v-model="item.name"></el-input>
          </el-form-item>
          <el-form-item prop="description" label="描述" label-width="80px">
            <el-input v-model="item.description"></el-input>
          </el-form-item>
          <el-form-item prop="inventory" label="库存" label-width="80px">
            <el-input v-model="item.inventory"></el-input>
          </el-form-item>
          <el-form-item prop="requireApplication" label="申请条件 " label-width="80px">
            <el-input v-model="item.requireApplication"></el-input>
          </el-form-item>
          <el-form-item prop="isEnable" label="状态" label-width="80px">
            <template>
              <el-select v-model="item.isEnable" placeholder="请选择">
                <!--:label控制下拉选选项的文本内容 :value代表提交的值-->
                <el-option v-for="c in isEnableArr"
                           :label="c.name"
                           :value="c.isEnable">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="提交时间" label-width="80px">
            <el-input v-model="item.itemCreate" readonly ></el-input>
          </el-form-item>
          <el-form-item label="最后修改时间" label-width="80px">
            <el-input v-model="item.itemModified" readonly ></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="update()">修改</el-button>
      </el-card>
    </template>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: this.$route.query.name,
        isEnable:'',
        item:{
          id:"",
          name:"",
          description:"",
          inventory:"",
          requireApplication:"",
          itemCreate:"",
          itemModified:""
        },
        isEnableArr:[{name:'启用',isEnable:1},{name:'禁用',isEnable:0}],
        rules: {
          name: [
            { required: true, message: '请输入物资名称', trigger: 'blur' },
            { min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '请输入物资描述', trigger: 'blur' },
          ],
          inventory: [
            { required: true, message: '请输入物资存量', trigger: 'blur' },
          ],
          requireApplication: [
            { required: true, message: '请输入身份物资申请条件', trigger: 'blur' },
          ],
        }
      }
    },
    created() {
      this.getData();
    },

    methods: {
      getData(){
        console.log("name========"+this.name)
        // 发请求获取用户信息
        let url = 'http://176.17.10.223:18081/item/details'
        let data = 'name=' + this.name;
        this.axios.post(url,data).then( (response)=> {
          // 将得到的用户数据存储起来
          this.item = response.data.data;
          // 判断查到的用户数据中的isEnable是否为1
          if (response.data.data.isEnable === 1){
            this.isEnable='启用';
          }else {
            this.isEnable='禁用';
          }
        })
      },
      update(){
        let url = 'http://176.17.10.223:18081/item/updateItem'
        let data = 'id='+ this.item.id +
                '&name=' + this.item.name +
                '&description=' + this.item.description +
                '&inventory=' + this.item.inventory +
                '&requireApplication=' + this.item.requireApplication ;
                /*'&itemCreate=' + this.item.itemCreate +
                '&itemModified=' + this.item.itemModified ;*/
        console.log("data------" + data)
        this.axios.post(url,data).then((response)=> {
          this.user = response.data.data;
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          // 提交之后返回到用户管理页面
          this.$router.push({path: '/admin/manage/item/info'});  //页面路由刷新
        })
      },
      goBack(){
        //返回上一页面
        history.back();
      }
    },
  }
</script>
<style>
  .el-input__inner {
    width: 500px;
  }
  .el-card{
    width: 100%;
    height: 100%;
  }
</style>